<template>
	<div class="mine">
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="头像">
				<el-upload
					class="avatar-uploader"
					action="http://localhost:8080/upload"
					:show-file-list="false"
					:http-request="upload"
				>
					<img v-if="imageUrl" :src="imageUrl" class="avatar" title="点击修改头像"/>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="编号">
				<el-input v-model="form.id" :disabled="true"></el-input>
			</el-form-item>
			<el-form-item label="账号">
				<el-input v-model="form.account" :disabled="true"></el-input>
			</el-form-item>
			<el-form-item label="用户名">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="form.phone"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio v-model="radio" label="男">男</el-radio>
				<el-radio v-model="radio" label="女">女</el-radio>
			</el-form-item>
			<el-form-item label="权限管理">
				<el-radio-group v-model="radio1">
					<el-radio-button label="超级管理员" :disabled="true"></el-radio-button>
					<el-radio-button label="管理员" :disabled="true"></el-radio-button>
					<el-radio-button label="VIP用户" :disabled="true"></el-radio-button>
					<el-radio-button label="普通用户" :disabled="true"></el-radio-button>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<el-button type="primary" round :loading="submitLoading" @click="handleSubmit">提交</el-button>
	</div>
</template>

<script>
import tableMng from '@/utils/tableMng'
import AvatarUpload from '@/components/business/upload/avatar-upload'
import { editInfo, getInfo, upload } from '@/api/request'
export default {
	name: 'Mine',
	components: {
		AvatarUpload,
	},
	created() {
		let info = window.JSON.parse(sessionStorage.getItem('info'))
		let str = info.u_jurisdiction
		let jur = ''
		if (str === 'ordinary') {
			jur = '普通用户'
		}
		if (str === 'vip') {
			jur = 'VIP用户'
		}
		if (str === 'admin') {
			jur = '管理员'
		}
		if (str === 'superAdmin') {
			jur = '超级管理员'
		}
		this.form.id = info.u_id
		this.form.account = info.u_account
		this.form.phone = info.u_phone
		this.form.name = info.u_name
		this.radio = info.u_sex
		this.radio1 = jur
	},

	data() {
		return {
			info: sessionStorage.getItem('info') ? window.JSON.parse(sessionStorage.getItem('info')) : {},
			tableMng,
			imageUrl:  window.JSON.parse(sessionStorage.getItem('info')).u_img
				? 'http://localhost:8080/' + window.JSON.parse(sessionStorage.getItem('info')).u_img
				: 'http://localhost:8080/uploads/upload-1641972199568.jpg',
			form: {
				account: '',
				id: '',
				phone: '',
				name: '',
			},
			radio: '男',
			radio1: '超级管理员',
			rules: {
				name: [
					{
						required: true,
						message: '请填写姓名',
						trigger: 'blur',
					},
					{
						max: 6,
						message: '姓名长度不能超过6个字',
						trigger: 'blur',
					},
				],
				gender: [
					{
						required: true,
						message: '请选择性别',
						trigger: 'change',
					},
				],

				mobilePhone: [
					{
						required: true,
						message: '请填写手机号',
						trigger: 'blur',
					},
					{
						pattern: /^1[345789]\d{9}$/,
						message: '手机号码格式不正确',
						trigger: 'blur',
					},
				],
				email: [
					{
						type: 'email',
						message: '邮箱格式不正确',
						trigger: 'blur',
					},
				],
			},
			submitLoading: false,
		}
	},
	methods: {
		async upload(url) {
			// console.log(url)
			let info = window.JSON.parse(sessionStorage.getItem('info'))
			let id = info.u_id
			const form = new FormData() // FormData 对象
			form.append('file', url.file) // 文件对象  'upload'是后台接收的参数名
			form.append('id', id)
			// console.log(form)
			let res = await upload(form)
			console.log(res)
			if (res.state === 'OK') {
				this.imageUrl = 'http://localhost:8080' + res.data.url
				info.u_img = res.data.url
				sessionStorage.setItem('info', window.JSON.stringify(info))
				window.location.reload()
			}
		},
		async handleSubmit() {
			this.submitLoading = true
			let name = this.form.name
			let account = this.form.account
			let phone = this.form.phone
			let id = this.form.id
			let sex = this.radio
			let jur = ''
			if (this.radio1 === '普通用户') {
				jur = 'ordinary'
			}
			if (this.radio1 === 'VIP用户') {
				jur = 'vip'
			}
			if (this.radio1 === '管理员') {
				jur = 'admin'
			}
			if (this.radio1 === '超级管理员') {
				jur = 'superAdmin'
			}
			let res = await editInfo({ name, account, phone, id, jur, sex })
			if (res.state === 'OK') {
				;(async () => {
					let info = window.JSON.parse(sessionStorage.getItem('info'))

					let res = await getInfo({ id: info.u_id })
					if (res.state === 'OK') {
						let data = res.data
						let str = data.u_jurisdiction
						let jur = ''
						if (str === 'ordinary') {
							jur = '普通用户'
						}
						if (str === 'vip') {
							jur = 'VIP用户'
						}
						if (str === 'admin') {
							jur = '管理员'
						}
						if (str === 'superAdmin') {
							jur = '超级管理员'
						}
						this.form.id = data.u_id
						this.form.account = data.u_account
						this.form.phone = data.u_phone
						this.form.name = data.u_name
						this.radio = data.u_sex
						this.radio1 = jur
						sessionStorage.setItem('info', window.JSON.stringify(data))
					}
				})()
				this.$message({
					message: '修改成功!',
					type: 'success',
				})
				this.dialogVisible = false
			} else {
				this.$message.error(res.data)
			}

			this.submitLoading = false
		},
	},
}
</script>
<style lang="scss" scoped>
.mine {
	width: 50%;
	min-width: 600px;
	margin: 0 auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;

	.el-button {
		display: block;
		margin: 0 auto;
	}
}
.avatar {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}
</style>
